<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="Hexo">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hexo">
  
    <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
  

</head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main">
  
    <article id="post-node2" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2017/10/25/node2/" class="article-date">
  <time datetime="2017-10-25T12:18:59.640Z" itemprop="datePublished">2017-10-25</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2017/10/25/node2/">nodejs1</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="同步和异步的对比【非阻塞I-O和阻塞I-O】"><a href="#同步和异步的对比【非阻塞I-O和阻塞I-O】" class="headerlink" title="同步和异步的对比【非阻塞I/O和阻塞I/O】"></a>同步和异步的对比【非阻塞I/O和阻塞I/O】</h2><h3 id="异步读取文件"><a href="#异步读取文件" class="headerlink" title="异步读取文件"></a>异步读取文件</h3><h3 id="异步嵌套读取文件"><a href="#异步嵌套读取文件" class="headerlink" title="异步嵌套读取文件"></a>异步嵌套读取文件</h3><h3 id="同步读取文件"><a href="#同步读取文件" class="headerlink" title="同步读取文件"></a>同步读取文件</h3><h3 id="异步和同步操作中，捕获错误的方式"><a href="#异步和同步操作中，捕获错误的方式" class="headerlink" title="异步和同步操作中，捕获错误的方式"></a>异步和同步操作中，捕获错误的方式</h3><h2 id="Node-中的模块化"><a href="#Node-中的模块化" class="headerlink" title="Node 中的模块化"></a>Node 中的模块化</h2><p><img src="images/模块化房屋.jpg" alt="模块化房屋"><br><img src="images/笔记本主板.jpg" alt="笔记本主板"></p>
<h3 id="什么是程序开发中的模块及好处"><a href="#什么是程序开发中的模块及好处" class="headerlink" title="什么是程序开发中的模块及好处"></a>什么是程序开发中的模块及好处</h3><ul>
<li>什么是程序开发中的模块化：把一些功能类似的代码，封装到一个单独的文件中去，这些单独抽离出来的代码文件，就能够提供各种各样好用的功能；这种通过代码功能分割文件的方式，叫做程序中的模块化；</li>
<li>好处：保证了每个文件的功能（职能）单一；需要什么特定的功能，直接调用某一个特定的模块；对将来程序开发和维护都有好处！同时也解决了全局变量污染的问题，因为每个模块都有独立的作用域；</li>
</ul>
<h3 id="【★★】Node-中如何实现模块化"><a href="#【★★】Node-中如何实现模块化" class="headerlink" title="【★★】Node 中如何实现模块化"></a>【★★】Node 中如何实现模块化</h3><p>在Node中基于CommonJS规范，通过三个东西实现模块化：</p>
<ul>
<li>module：表示一个模块，在Node中，最常见的模块，就是一个个的JS文件！</li>
<li>require：作用是加载其他模块用的；在一个JS文件中，如何引用其他JS文件中的成员呢？就是用require</li>
<li>exports：在Node的模块中，如果这个模块需要向外暴露一些成员，供其他JS模块使用，那么，需要使用exports向外暴露这些成员！</li>
</ul>
<blockquote>
<p>注意：Node 中的模块化，主要解决的JS文件之间的相互依赖关系！</p>
</blockquote>
<h3 id="【理解】Node-中的模块的分类"><a href="#【理解】Node-中的模块的分类" class="headerlink" title="【理解】Node 中的模块的分类"></a>【理解】Node 中的模块的分类</h3><p>node由三部分组成：ECMAScript + 核心API + 第三方等API</p>
<h4 id="核心模块"><a href="#核心模块" class="headerlink" title="核心模块"></a>核心模块</h4><ul>
<li>什么是核心模块：官方，发现一些功能模块使用非常频繁，然后，官方把这些模块，编译成了二进制可执行文件，然后打包到了Node的安装包中；所以，这些核心模块就已经随着安装Node时候，被安装到了本地；</li>
<li>如何使用核心模块<br>　使用require（‘核心模块的名称’）；   require(‘fs/os/http’)</li>
</ul>
<h4 id="第三方模块"><a href="#第三方模块" class="headerlink" title="第三方模块"></a>第三方模块</h4><ul>
<li>什么是第三方模块：除了官方提供的好用的核心模块之外，我们程序员发现，还有一些使用也很频繁的代码和方法，一些牛逼的团体、个人、公司，开发出了好用的模块，通过NPM官网，托管出去，供其他人下载使用的这些模块；统称为第三方模块；</li>
<li>如何使用第三方模块<br>　－　通过moment这个第三方模块，来介绍如何使用一个第三方模块；</li>
<li>第三方模块的使用方式：<ol>
<li>先使用npm下载这个模块！【注意：在安装第三方模块的时候，安装的名字，就是你在require时候导入的名字】</li>
<li>使用require导入这个第三方模块！</li>
<li>通过官方文档，试着去使用这个第三方模块！</li>
<li>注意：无论是核心模块、还是第三方模块，都是通过 <code>标识符名称</code>来引用这个模块的！</li>
</ol>
</li>
</ul>
<h4 id="用户模块"><a href="#用户模块" class="headerlink" title="用户模块"></a>用户模块</h4><ul>
<li>什么是用户模块：程序员自己定义的JS文件，统称为用户模块！</li>
<li>用户模块向外导出成员的两种方式：<ul>
<li>第一种方式：使用global对象，相当于浏览器中的window对象<ul>
<li><ol>
<li>全局变量污染，</li>
</ol>
</li>
<li><ol>
<li>不知道成员是从哪个模块中暴露 出去的</li>
</ol>
</li>
</ul>
</li>
<li>推荐Node提供的exports</li>
</ul>
</li>
</ul>
<h3 id="exports-和-module-exports-的区别"><a href="#exports-和-module-exports-的区别" class="headerlink" title="exports 和 module.exports 的区别"></a>exports 和 module.exports 的区别</h3><ol>
<li><p>通过 module.exports 可以使用 . 的形式追加属性，也可以使用 等号 直接赋值的形式导出成员；</p>
</li>
<li><p>exports 只能通过 . 的形式追加属性；不能使用 等号 直接赋值的形式！</p>
</li>
<li><p>注意： 在一个 module 中，最终向外暴露的成员，以 module.exports 指向的对象为准！</p>
</li>
<li><p>在一个模块中，尽量不要混合使用 <code>module.exports</code> 和 <code>exports</code></p>
</li>
</ol>
<h3 id="【了解】模块加载规则"><a href="#【了解】模块加载规则" class="headerlink" title="【了解】模块加载规则"></a>【了解】模块加载规则</h3><ol>
<li>优先从缓存中加载<ul>
<li>使用 <code>delete require.cache[__filename]</code> 来防止模块被缓存，但是一般不建议这么用，因为模块的缓存能够提高运行效率；</li>
</ul>
</li>
<li>加载核心模块:优先从缓存中加载；如果缓存中没有的话，再去执行加载核心模块！</li>
<li><p>自己的模块:优先从缓存中加载；如果缓存中没有的话，再去执行加载用户模块！</p>
<ul>
<li>用户模块的查找规则：<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">用户模块的查找规则：</div><div class="line">如果不写后缀名，则先严格按照给定的文件名去查找模块并加载执行；</div><div class="line">index   -&gt;  index.js  -&gt;   index.json    -&gt;  index.node</div></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>第三方模块查找规则：</p>
<ol>
<li>node首先，查看项目根目录中有没有 <code>node_modules</code> 文件夹</li>
<li>查找 <code>node_modules</code> 文件夹中，有没有和第三方模块名称一致的文件夹</li>
<li>在模块对应的文件夹中，查找有没有 <code>package.json</code> 这个文件</li>
<li>在 <code>package.json</code> 文件中，查找有没有 <code>main</code> 属性</li>
<li>如果有 <code>main</code> 属性，并且 <code>main</code> 属性指向的路径存在，那么就尝试加载这个路径指定的文件！</li>
<li>如果 <code>package.json</code> 文件中，没有 <code>main</code> 属性，或者 <code>main</code> 属性指向的路径不存在，或者没有<code>package.json</code> 文件， 那么，Node尝试加载 模块根目录中 <code>index</code> 相关文件：<code>index.js</code> -&gt; <code>index.json</code> -&gt; <code>index.node</code></li>
<li>如果在<code>node_modules</code>文件夹中，找不到对应的模块文件夹，或者在项目根目录中根本没有<code>node_modules</code>文件夹，则向上一层文件夹中去查找，查找规则同上！</li>
<li>如果上一层目录中也没有查找到，则再向上翻一层去查找，直到找到当前项目所在的盘符根目录为止！</li>
<li>如果找到了盘符根目录还找不到，则报错：<code>cannot find module ***</code></li>
</ol>
</li>
</ol>
<h2 id="结合art-template模板引擎在服务器端渲染页面"><a href="#结合art-template模板引擎在服务器端渲染页面" class="headerlink" title="结合art-template模板引擎在服务器端渲染页面"></a>结合art-template模板引擎在服务器端渲染页面</h2><p><a href="https://aui.github.io/art-template/docs/" target="_blank" rel="external">art-template官方文档</a></p>
<h2 id="【了解】服务端渲染和客户端渲染的对比"><a href="#【了解】服务端渲染和客户端渲染的对比" class="headerlink" title="【了解】服务端渲染和客户端渲染的对比"></a>【了解】服务端渲染和客户端渲染的对比</h2><p><a href="https://www.cnblogs.com/" target="_blank" rel="external">博客园官网</a></p>
<ol>
<li>服务器端渲染<ul>
<li>特点：Node服务器先读取模板页面，再获取要渲染的数据，然后直接在服务器端把完整的页面渲染拼接好，然后通过网络一次性的把结果发送给浏览器去显示！【注意：通过服务器端渲染，在网络中传输的是一个真正页面】</li>
<li>优点：请求次数少，速度快，对SEO友好</li>
<li>缺点：服务器渲染压力大【在后端可以通过缓存机制去解决】</li>
</ul>
</li>
<li>客户端渲染<ul>
<li>特点：先访问服务器获取到模板页面，然后再通过Ajax获取要渲染的数据，拿到这两者之后，再客户端调用模板引擎，渲染得到模板字符串，然后通过JS的方式，把结果展示到页面上！【真正的页面是在客户端浏览器中怼出来的，在进行网络传输的时候，第一次传输的是模板页面，第二次传输的是数据】</li>
<li>优点：减轻了服务器端的渲染压力</li>
<li>缺点：请求次数多，用户体验可能没有服务器端渲染好（白屏效果）；对SEO不友好</li>
</ul>
</li>
</ol>
<h2 id="使用nodemon来自动重启Node服务"><a href="#使用nodemon来自动重启Node服务" class="headerlink" title="使用nodemon来自动重启Node服务"></a>使用<code>nodemon</code>来自动重启Node服务</h2><ol>
<li>运行<code>npm i nodemon -g</code>全局安装模块</li>
<li>使用方式 和 <code>node</code> 完全一样：<ul>
<li><code>node 要执行文件的路径</code></li>
<li><code>nodemon 要执行文件的路径</code></li>
</ul>
</li>
</ol>
<h2 id="文件列表小案例"><a href="#文件列表小案例" class="headerlink" title="文件列表小案例"></a>文件列表小案例</h2><h2 id="获取文件的属性"><a href="#获取文件的属性" class="headerlink" title="获取文件的属性"></a>获取文件的属性</h2><h2 id="【重点】在优化前-先封装一个根据指定路径读取文件内容的方法"><a href="#【重点】在优化前-先封装一个根据指定路径读取文件内容的方法" class="headerlink" title="【重点】在优化前, 先封装一个根据指定路径读取文件内容的方法"></a>【重点】在优化前, 先封装一个<code>根据指定路径读取文件内容</code>的方法</h2><h2 id="【重点】将读取文件夹的方法抽离出来，同时对error进行处理"><a href="#【重点】将读取文件夹的方法抽离出来，同时对error进行处理" class="headerlink" title="【重点】将读取文件夹的方法抽离出来，同时对error进行处理"></a>【重点】将读取文件夹的方法抽离出来，同时对error进行处理</h2><h2 id="相关文章"><a href="#相关文章" class="headerlink" title="相关文章"></a>相关文章</h2><ol>
<li><a href="https://aui.github.io/art-template/" target="_blank" rel="external">art-template 官方文档</a></li>
<li><a href="http://www.infoq.com/cn/articles/es6-in-depth-template-string" target="_blank" rel="external">ES6 - 模板字符串</a></li>
<li><a href="http://www.cnblogs.com/xljzlw/p/3694861.html" target="_blank" rel="external">js中的数组对象排序</a></li>
<li><a href="https://github.com/i5ting/tocmd.npm" target="_blank" rel="external">i5ting/tocmd.npm 将MD转换为HTML</a></li>
<li><a href="https://www.zhihu.com/question/20298345" target="_blank" rel="external">JavaScript 语句后应该加分号么？</a></li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2017/10/25/node2/" data-id="cj970btp20000r852a58h7m5o" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-node-express" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2017/10/25/node-express/" class="article-date">
  <time datetime="2017-10-25T12:08:28.676Z" itemprop="datePublished">2017-10-25</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2017/10/25/node-express/">express</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="什么是Express-js"><a href="#什么是Express-js" class="headerlink" title="什么是Express.js"></a>什么是Express.js</h2><ol>
<li>Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架；</li>
<li>Express 不对 Node.js 已有的特性进行二次抽象，只是在Node.js之上扩展了构建 Web 应用所需的基本功能。</li>
</ol>
<blockquote>
<p>总结什么是Express.js：是一个基于Node.js的Web开发框架。Express框架并没有覆盖或删除原生的API，而是基于原生的API，做了进一步的封装，提供了更好用的一些API，方便快速进行Web开发！<br>res.render、res.json、res.redirect、req.query<br>Node.js是Javascript的服务器端运行环境！express只是基于Node，提供了开发Web应用的框架和API。</p>
</blockquote>
<h2 id="如何创建基本的HTTP服务（新旧方式对比）"><a href="#如何创建基本的HTTP服务（新旧方式对比）" class="headerlink" title="如何创建基本的HTTP服务（新旧方式对比）"></a>如何创建基本的HTTP服务（新旧方式对比）</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line">var express = require(&apos;express&apos;);</div><div class="line"></div><div class="line">// 创建一个 app 出来</div><div class="line">var app = express();</div><div class="line"></div><div class="line">// 捕获 get 类型的 / 请求</div><div class="line">app.get(&apos;/&apos;, function (req, res) &#123;</div><div class="line">  // 支持原生的 end 方法</div><div class="line">  res.end(&apos;OK&apos;);</div><div class="line">&#125;);</div><div class="line">// 捕获 get 类型的 /a 请求</div><div class="line">app.get(&apos;/a&apos;, function (req, res) &#123;</div><div class="line">  // 通过 express 封装的 send 方法，返回内容，会自动添加响应头，更加方便便捷</div><div class="line">  res.send(&apos;&lt;h1&gt;你好啊&lt;/h1&gt;&apos;);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">// 启动 app 监听程序</div><div class="line">app.listen(3000, function () &#123;</div><div class="line">  console.log(&apos;App running at http://127.0.0.1:3000&apos;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h2 id="http模块原生end方法和-express中send方法的对比"><a href="#http模块原生end方法和-express中send方法的对比" class="headerlink" title="http模块原生end方法和 express中send方法的对比"></a>http模块原生<code>end</code>方法和 express中<code>send</code>方法的对比</h2><ol>
<li>send方法中默认处理了中文乱码问题</li>
<li>send方法默认返回的格式就是HTML类型的文本内容</li>
</ol>
<h2 id="根据不同的路由method和url响应不同的文本消息"><a href="#根据不同的路由method和url响应不同的文本消息" class="headerlink" title="根据不同的路由method和url响应不同的文本消息"></a>根据不同的路由<code>method</code>和<code>url</code>响应不同的文本消息</h2><h2 id="根据不同的路由method和url响应不同的html页面"><a href="#根据不同的路由method和url响应不同的html页面" class="headerlink" title="根据不同的路由method和url响应不同的html页面"></a>根据不同的路由<code>method</code>和<code>url</code>响应不同的html页面</h2><ol>
<li>res.sendFile</li>
</ol>
<h2 id="分别从原生和express的app-js中抽离router路由模块"><a href="#分别从原生和express的app-js中抽离router路由模块" class="headerlink" title="分别从原生和express的app.js中抽离router路由模块"></a>分别从原生和express的<code>app.js</code>中抽离<code>router</code>路由模块</h2><h2 id="Express中的路由"><a href="#Express中的路由" class="headerlink" title="Express中的路由"></a>Express中的路由</h2><h2 id="中间件的概念"><a href="#中间件的概念" class="headerlink" title="中间件的概念"></a>中间件的概念</h2><p>在自来水的处理过程中，中间的每一个处理环节，可以叫做中间件！<br>中间件就是用来处理原材料的，那么，在自来水处理过程中，处理的原料是水；在express中，中间件处理的原料是 request 对象 和 response 对象；<br><img src="images/自来水处理过程.jpg" alt="自来水处理过程"></p>
<p><strong>概念：</strong>中间件（Middleware） <strong>是一个函数</strong>，它可以访问<strong>请求对象</strong>（request object (req)）, <strong>响应对象</strong>（response object (res)）, 和 web 应用中处于请求-响应循环流程中的中间件，一般被命名为 next 的变量。</p>
<p>经过中间件的处理之后，express就向 req 和 res ,对象身上，挂在了一些好用的方法和属性<br>req.query<br>res.send()<br>res.json()</p>
<ul>
<li>中间件的功能包括：<ul>
<li>执行任何代码。</li>
<li>修改请求和响应对象。</li>
<li>终结请求-响应循环。</li>
<li>调用堆栈中的下一个中间件。</li>
</ul>
</li>
</ul>
<h2 id="body-parser-中间件的使用步骤"><a href="#body-parser-中间件的使用步骤" class="headerlink" title="body-parser 中间件的使用步骤"></a>body-parser 中间件的使用步骤</h2><p>在 express 中，可以使用 body-parser 第三方中间件，去帮我们出去 post 提交过来的数据</p>
<ol>
<li>使用 npm 安装</li>
<li>导入 这个第三方中间件 模块</li>
<li>使用 app.use()注册刚才导入的中间件，到 app身上</li>
</ol>
<h2 id="Express-里中间件的分类（形式上的分类）"><a href="#Express-里中间件的分类（形式上的分类）" class="headerlink" title="Express 里中间件的分类（形式上的分类）"></a>Express 里中间件的分类（形式上的分类）</h2><ol>
<li>应用级别的中间件： 所有挂载到 app 身上的方法，都叫做 “应用级别的中间件”  app.get  app.post  app.use</li>
<li>路由级别的中间件： 挂载到了 router 对象上，这个 router 对象 是经过调用 <code>express.Router()</code> 得到了；    router.get    router.post   router.use</li>
<li>错误处理中间件: 有四个参数   err, req, res, next</li>
<li>express唯一的一个内置中间件： express.static(root, [options]) 用于托管静态资源</li>
<li>第三方中间件： 非Express官方提供的中间件，叫做第三方中间件</li>
</ol>
<h2 id="在Express中使用路由"><a href="#在Express中使用路由" class="headerlink" title="在Express中使用路由"></a>在Express中使用路由</h2><ol>
<li><p>定义路由的 <code>router</code> 文件：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">var express = require(&apos;express&apos;);</div><div class="line">// 使用 express 的 Router() 方法，得到一个路由实例</div><div class="line">var router = express.Router();</div><div class="line"></div><div class="line">// 通过 Method 和 请求路径，分发不同的请求到不同的处理函数中</div><div class="line">router.get(&apos;/&apos;, function (req, res) &#123;</div><div class="line">  res.send(&apos;&lt;h1&gt;首页&lt;/h1&gt;&apos;);</div><div class="line">&#125;).get(&apos;/movie&apos;, function (req, res) &#123;</div><div class="line">  res.send(&apos;&lt;h1&gt;电影&lt;/h1&gt;&apos;);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">module.exports = router;</div></pre></td></tr></table></figure>
</li>
<li><p>导入路由并注册使用</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">var express = require(&apos;express&apos;);</div><div class="line">// 导入路由</div><div class="line">var router = require(&apos;./router&apos;);</div><div class="line"></div><div class="line">// 创建一个 app 出来</div><div class="line">var app = express();</div><div class="line">// 注册路由</div><div class="line">app.use(router);</div><div class="line"></div><div class="line">// 启动 app 监听程序</div><div class="line">app.listen(3000, function () &#123;</div><div class="line">  console.log(&apos;App running at http://127.0.0.1:3000&apos;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="在express中使用模板引擎"><a href="#在express中使用模板引擎" class="headerlink" title="在express中使用模板引擎"></a>在express中使用模板引擎</h2><p><code>ejs</code>默认的模板文件后缀名是<code>.ejs</code>，如果你想让<code>ejs</code>模板引擎的默认后缀名是<code>.html</code>，需要进行相关的设置</p>
<h3 id="使用ejs"><a href="#使用ejs" class="headerlink" title="使用ejs"></a>使用ejs</h3><ol>
<li><p>运行npm安装<code>ejs</code>：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">cnpm i ejs -S</div></pre></td></tr></table></figure>
</li>
<li><p>注册模板引擎：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">app.set(&apos;view engine&apos;, &apos;ejs&apos;);</div></pre></td></tr></table></figure>
</li>
<li><p>同时，也可以修改默认的模板文件存放路径：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">app.set(&apos;views&apos;, __dirname + &apos;/views&apos;);</div></pre></td></tr></table></figure>
</li>
<li><p>使用ejs将模板渲染出来，同时将渲染的结果发送给客户端：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">res.render(&apos;模板名称&apos;, &#123;&#125;); // 第一个参数是模板的名称，第二个参数是模板要渲染的数据</div></pre></td></tr></table></figure>
</li>
</ol>
<p>例如：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">// node.js调用render函数</div><div class="line">res.render(&apos;hero_index&apos;, &#123;</div><div class="line">        username: &apos;尼古拉斯·赵四&apos;,</div><div class="line">        hobby: [&apos;吃饭&apos;, &apos;唱歌&apos;, &apos;打电话&apos;],</div><div class="line">        isShow: false</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<p>html模板字符串：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">&lt;body&gt;</div><div class="line">    &lt;h1 style=&quot;color:&lt;%= !isShow?&apos;red&apos;:&apos;&apos; %&gt;;&quot;&gt;这是EJS的模板页面 - &lt;%= username %&gt;&lt;/h1&gt;</div><div class="line">    &lt;% if(!isShow)&#123; %&gt;</div><div class="line">    &lt;h3&gt;这是一个漂亮的h3标题&lt;/h3&gt;</div><div class="line">    &lt;% &#125; %&gt;</div><div class="line">    &lt;ul&gt;</div><div class="line">        &lt;% hobby.forEach(function(item, i)&#123; %&gt;</div><div class="line">        &lt;li&gt;&lt;%= item %&gt;&lt;/li&gt;</div><div class="line">        &lt;% &#125;) %&gt;</div><div class="line">    &lt;/ul&gt;</div><div class="line">&lt;/body&gt;</div></pre></td></tr></table></figure></p>
<ol>
<li><p>如何修改ejs的定界符:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">// 导入 EJS 并修改定界符</div><div class="line">var ejs = require(&apos;ejs&apos;);</div><div class="line">ejs.delimiter = &apos;?&apos;;</div><div class="line"></div><div class="line">app.engine(&apos;ejs&apos;, ejs.renderFile);</div><div class="line">// 设置完毕之后，在调用res.render()函数的时候，模板文件必须带后缀名</div></pre></td></tr></table></figure>
</li>
<li><p>如何使用公共模板：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">&lt;!--导入公共的头部--&gt;</div><div class="line">&lt;?- include(&apos;header&apos;) ?&gt;</div><div class="line"></div><div class="line">&lt;h1&gt;ejs&lt;/h1&gt;</div><div class="line">&lt;ul&gt;</div><div class="line">  &lt;? names.forEach(function(item)&#123; ?&gt;</div><div class="line">    &lt;li&gt;&lt;?= item ?&gt;&lt;/li&gt;</div><div class="line">  &lt;? &#125;) ?&gt;</div><div class="line">&lt;/ul&gt;</div><div class="line"></div><div class="line">&lt;!--导入公共的底部--&gt;</div><div class="line">&lt;?- include(&apos;footer&apos;) ?&gt;</div></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="相关文章"><a href="#相关文章" class="headerlink" title="相关文章"></a>相关文章</h2><ul>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify" target="_blank" rel="external">MDN - JSON.stringify()</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader" target="_blank" rel="external">MDN - FileReader</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/FormData" target="_blank" rel="external">MDN - FormData</a></li>
<li><a href="http://www.expressjs.com.cn/" target="_blank" rel="external">Express - 中文网</a></li>
<li><a href="http://expressjs.com/" target="_blank" rel="external">Express - 英文官网</a></li>
<li><a href="http://www.runoob.com/nodejs/nodejs-tutorial.html" target="_blank" rel="external">Node.js 教程</a></li>
<li><a href="https://www.runoob.com/w3cnote/express-4-x-api.html" target="_blank" rel="external">菜鸟教程 - Express 4.x API 中文文档</a></li>
<li><a href="https://blog.gtwang.org/programming/learn-to-use-the-new-router-in-expressjs-4/" target="_blank" rel="external">Express.js 4.0 的路由（Router）功能用法教學</a></li>
<li><a href="https://github.com/aui/art-template" target="_blank" rel="external">github - art-template</a></li>
<li><a href="https://github.com/aui/express-art-template" target="_blank" rel="external">github - express-art-template</a></li>
<li><a href="https://github.com/mde/ejs" target="_blank" rel="external">github - ejs</a></li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2017/10/25/node-express/" data-id="cj97024lg0000j852f3o9aa3o" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-node" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2017/10/25/node/" class="article-date">
  <time datetime="2017-10-25T12:04:18.200Z" itemprop="datePublished">2017-10-25</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2017/10/25/node/">nodejs</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="搭建博客案例基本结构并渲染首页"><a href="#搭建博客案例基本结构并渲染首页" class="headerlink" title="搭建博客案例基本结构并渲染首页"></a>搭建博客案例基本结构并渲染首页</h2><ul>
<li>把MVC结构搭建起来</li>
</ul>
<h2 id="用户注册模块的实现"><a href="#用户注册模块的实现" class="headerlink" title="用户注册模块的实现"></a>用户注册模块的实现</h2><h2 id="用户登录模块的实现"><a href="#用户登录模块的实现" class="headerlink" title="用户登录模块的实现"></a>用户登录模块的实现</h2><h2 id="登录密码MD5加密存储的实现"><a href="#登录密码MD5加密存储的实现" class="headerlink" title="登录密码MD5加密存储的实现"></a>登录密码MD5加密存储的实现</h2><h3 id="为什么要对密码进行加密处理"><a href="#为什么要对密码进行加密处理" class="headerlink" title="为什么要对密码进行加密处理"></a>为什么要对密码进行加密处理</h3><p>在现实生活中，很多人多个账号公用一个密码，那么假如账号信息和个人信息被泄露，那么就存在个人信息和财产受到威胁的情况！<br>为了防止用户密码被泄露之后，很容易就被非法分子看到原始的密码，我们需要对用户的密码进行加密后再存储！<br>明文：将原密码实际的存储到数据库中可以直接查看用户的原始密码；<br>密文：就是将密码，加密之后再保存到数据中，这样存储方式，能有提高密码的安全性，就算数据库中的密码不小心被泄露了，非法分子，也无法直接获取到用户的原密码！</p>
<h3 id="什么是MD5加密"><a href="#什么是MD5加密" class="headerlink" title="什么是MD5加密"></a>什么是MD5加密</h3><p>MD5的全称是Message-Digest Algorithm 5（信息-摘要算法），在90年代初由MIT Laboratory for Computer Science和RSA Data Security Inc的Ronald L. Rivest开发出来，经MD2、MD3和MD4发展而来。<br>MD5加密的特性：</p>
<ul>
<li>MD5加密后输出的一般都是<code>32位长度的字符串</code></li>
<li>相同的内容使用MD5加密后，得到的内容是一致的</li>
<li>MD5加密后的字符串是无法通过算法的形式反向解密的（唯一的破解方式是暴力碰撞破解）</li>
<li>为了防止暴力碰撞破解，我们可以对需要加密的内容，进行<strong>加盐处理</strong></li>
</ul>
<blockquote>
<p>什么是加盐处理：就是在需要加密的文本内容，和一串长且复杂的文本进行拼接，这样就能防止加密后的MD5值被暴力碰撞破解。<br>为什么要加盐加密：就是为了防止用户的密码过于简单，然后我们程序通过加盐，提高了密码的复杂性，这样能够保证用户信息的安全！</p>
</blockquote>
<h3 id="在Express中使用MD5加密"><a href="#在Express中使用MD5加密" class="headerlink" title="在Express中使用MD5加密"></a>在Express中使用MD5加密</h3><ol>
<li><p>运行以下命令安装MD5加密模块：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install blueimp-md5 -S</div></pre></td></tr></table></figure>
</li>
<li><p>使用方式：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">var hash = md5(&quot;value&quot;, &quot;key&quot;);</div></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="HTTP协议的无状态性"><a href="#HTTP协议的无状态性" class="headerlink" title="HTTP协议的无状态性"></a>HTTP协议的无状态性</h2><ol>
<li>HTTP协议的通信模型：基于<code>请求 - 处理 - 响应</code>的！</li>
<li>由于这个通信协议的关系，导致了HTTP每个请求之间都是没有关联的，每当一个请求完成之后，服务器就忘记之前谁曾经请求过！</li>
<li>如果纯粹基于HTTP通信模型，是无法完成登录状态保持的！每次请求服务器，服务器都会把这个请求当作新请求来处理！</li>
<li>我们可以通过 cookie 技术，实现状态保持，但是由于cookie是存储在客户端的一门技术，所以安全性几乎没有，因此不要使用cookie存储敏感的数据！</li>
</ol>
<h2 id="cookie介绍"><a href="#cookie介绍" class="headerlink" title="cookie介绍"></a>cookie介绍</h2><h3 id="什么是cookie，作用是什么"><a href="#什么是cookie，作用是什么" class="headerlink" title="什么是cookie，作用是什么"></a>什么是cookie，作用是什么</h3><ul>
<li>由于<strong>Http协议是无状态</strong>的，且传统服务器<strong>只能被动的响应请求</strong>，所以，当服务器获取到请求的时候，并不知道当前请求属于哪个客户端！</li>
<li>服务器为了能够明确区分每个客户端，需要使用一些小技术，来根据不同的请求区分不同的客户端；</li>
<li>只要有请求发生，那么必然对应一个客户端，那么，我们可以在每次客户端发起请求的时候，向服务器自动发送一个标识符，告诉服务器当前是哪个客户端正在请求服务器的数据；</li>
<li>如何提供这个标识符呢？我们可以在请求头(Request Headers)中添加一个标签，叫做<code>cookie</code>，这样，每次发送请求，都会把这个cookie随同其他报文一起发送给服务器，服务器可以根据报文中的cookie，区分不同的客户端浏览器。</li>
<li>如何在客户端请求头中添加标识符？<ul>
<li>在Node中可以在<code>writeHeader</code>的时候，通过<code>Set-Cookie</code>来将cookie标识通过响应报文发送给客户端！</li>
<li>客户端也可以通过一些方式来操作自己的cookie，比如通过<code>jquery.cookie</code>这个插件！</li>
</ul>
</li>
</ul>
<h3 id="cookie的基本使用"><a href="#cookie的基本使用" class="headerlink" title="cookie的基本使用"></a>cookie的基本使用</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div></pre></td><td class="code"><pre><div class="line">var http = require(&apos;http&apos;);</div><div class="line"></div><div class="line">var server = http.createServer();</div><div class="line"></div><div class="line">server.on(&apos;request&apos;, function (req, res) &#123;</div><div class="line">    // 解析cookie</div><div class="line">    var cookies = &#123;&#125;;</div><div class="line">    var cookieStr = req.headers.cookie; // 从请求的headers中获取cookie信息</div><div class="line">    cookieStr &amp;&amp; cookieStr.split(&apos;;&apos;).forEach(function (item) &#123;</div><div class="line">        var parts = item.split(&apos;=&apos;);</div><div class="line">        cookies[parts[0].trim()] = parts[1].trim(); // 将cookie解析出来，保存到对象中</div><div class="line">    &#125;);</div><div class="line"></div><div class="line">    res.writeHeader(200, &#123;</div><div class="line">        &apos;Content-Type&apos;: &apos;text/plain; charset=utf-8&apos;,</div><div class="line">        &quot;Set-Cookie&quot;: [&apos;issend=ok&apos;, &apos;age=20&apos;]</div><div class="line">    &#125;);</div><div class="line"></div><div class="line">    if(cookies.issend ===&apos;ok&apos;)&#123;</div><div class="line">        res.end(&apos;不要太贪心哦！&apos;);</div><div class="line">    &#125;else&#123;</div><div class="line">        res.end(&apos;呐，赏你一朵小红花~~&apos;);</div><div class="line">    &#125;</div><div class="line">&#125;);</div><div class="line"></div><div class="line">server.listen(4000, function () &#123;</div><div class="line">    console.log(&apos;服务器已启动!&apos;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="通过expires设置Cookie的过期时间"><a href="#通过expires设置Cookie的过期时间" class="headerlink" title="通过expires设置Cookie的过期时间"></a>通过<code>expires</code>设置Cookie的过期时间</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">// 设置 过期时间 为60秒之后</div><div class="line">// 注意：在设置过期时间的时候，需要将时间转换为 UTC 格式</div><div class="line">var expiresTime = new Date(Date.now() + 1000 * 60).toUTCString();</div><div class="line">res.writeHeader(200, &#123;</div><div class="line">  &apos;Content-Type&apos;: &apos;text/html; charset=utf-8&apos;,</div><div class="line">  &apos;Set-Cookie&apos;: [&apos;isvisit=true;expires=&apos; + expiresTime, &apos;test=OK&apos;]</div><div class="line">&#125;);</div><div class="line">res.end(&apos;&lt;h3&gt;你好，欢迎光临，送给你一个苹果！&lt;/h3&gt;&apos;);</div></pre></td></tr></table></figure>
<p><a href="http://www.wbiao.cn/cartier-watches/knowledge/article-1468.html" target="_blank" rel="external">GMT和UTC有什么区别？格林尼治标准时（GMT）与世界时（UTC）是怎么回事</a></p>
<h3 id="cookie可以被伪造，不安全"><a href="#cookie可以被伪造，不安全" class="headerlink" title="cookie可以被伪造，不安全"></a>cookie可以被伪造，不安全</h3><p>使用谷歌插件<code>edit this cookie</code>，就能伪造cookie数据！所以不要使用cookie存储敏感的数据！比如登录状态和登录信息；<br>一些敏感的数据，应该存储都服务器端！</p>
<h2 id="登录退出及状态保存"><a href="#登录退出及状态保存" class="headerlink" title="登录退出及状态保存"></a>登录退出及状态保存</h2><h3 id="使用express-session来保存登录状态"><a href="#使用express-session来保存登录状态" class="headerlink" title="使用express-session来保存登录状态"></a>使用<code>express-session</code>来保存登录状态</h3><h4 id="什么是session"><a href="#什么是session" class="headerlink" title="什么是session"></a>什么是session</h4><p>由于HTTP是无状态的，所以服务器在每次连接中持续保存客户端的私有数据，此时需要结合cookie技术，通过session会话机制，在服务器端保存每个HTTP请求的私有数据；</p>
<h4 id="session原理"><a href="#session原理" class="headerlink" title="session原理"></a>session原理</h4><p>在服务器内存中开辟一块地址空间，专门存放每个客户端私有的数据，每个客户端根据cookie中保存的私有sessionId，可以获取到独属于自己的session数据。</p>
<h4 id="在express中使用session"><a href="#在express中使用session" class="headerlink" title="在express中使用session"></a>在express中使用session</h4><ol>
<li><p>安装session模块</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install express-session -S</div></pre></td></tr></table></figure>
</li>
<li><p>导入session模块</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">var session = require(&apos;express-session&apos;)</div></pre></td></tr></table></figure>
</li>
<li><p>在express中使用<code>session</code>中间件：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">// 启用 session 中间件</div><div class="line">app.use(session(&#123;</div><div class="line">  secret: &apos;keyboard cat&apos;, // 相当于是一个加密密钥，值可以是任意字符串</div><div class="line">  resave: false, // 强制session保存到session store中</div><div class="line">  saveUninitialized: false // 强制没有“初始化”的session保存到storage中</div><div class="line">&#125;))</div></pre></td></tr></table></figure>
</li>
<li><p>将私有数据保存到当前请求的session会话中：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">// 将登录的用户保存到session中</div><div class="line">req.session.user = result.dataValues;</div><div class="line">// 设置是否登录为true</div><div class="line">req.session.islogin = true;</div></pre></td></tr></table></figure>
</li>
<li><p>通过<code>destroy()</code>方法清空<code>session</code>数据：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">req.session.destroy(function(err)&#123;</div><div class="line">  if(err) throw err;</div><div class="line">  console.log(&apos;用户退出成功！&apos;);</div><div class="line">  res.redirect(&apos;/&apos;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="注销功能的实现"><a href="#注销功能的实现" class="headerlink" title="注销功能的实现"></a>注销功能的实现</h2><h2 id="使用模板引擎处理公共部分"><a href="#使用模板引擎处理公共部分" class="headerlink" title="使用模板引擎处理公共部分"></a>使用模板引擎处理公共部分</h2><h2 id="添加文章并跳转到文章详情"><a href="#添加文章并跳转到文章详情" class="headerlink" title="添加文章并跳转到文章详情"></a>添加文章并跳转到文章详情</h2><h2 id="完成文章编辑功能"><a href="#完成文章编辑功能" class="headerlink" title="完成文章编辑功能"></a>完成文章编辑功能</h2><h2 id="首页文章列表渲染和处理相对时间"><a href="#首页文章列表渲染和处理相对时间" class="headerlink" title="首页文章列表渲染和处理相对时间"></a>首页文章列表渲染和处理相对时间</h2><h2 id="使用Sql语句进行联表查询"><a href="#使用Sql语句进行联表查询" class="headerlink" title="使用Sql语句进行联表查询"></a>使用Sql语句进行联表查询</h2><h2 id="首页文章列表分页功能的实现"><a href="#首页文章列表分页功能的实现" class="headerlink" title="首页文章列表分页功能的实现"></a>首页文章列表分页功能的实现</h2><h2 id="相关文章"><a href="#相关文章" class="headerlink" title="相关文章"></a>相关文章</h2><ol>
<li><a href="http://blog.csdn.net/liangklfang/article/details/50998959" target="_blank" rel="external">node.js中express-session配置项详解</a></li>
<li><a href="http://www.cmd5.com/" target="_blank" rel="external">MD5在线生成器1</a></li>
<li><a href="http://pmd5.com/" target="_blank" rel="external">MD5在线生成器2</a></li>
<li><a href="https://github.com/blueimp/JavaScript-MD5" target="_blank" rel="external">JavaScript-MD5</a></li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2017/10/25/node/" data-id="cj96zu15x0000do52irlq1d8s" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-nodelast" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2017/10/25/nodelast/" class="article-date">
  <time datetime="2017-10-25T06:25:53.594Z" itemprop="datePublished">2017-10-25</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2017/10/25/nodelast/">angular2</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="搭建博客案例基本结构并渲染首页"><a href="#搭建博客案例基本结构并渲染首页" class="headerlink" title="搭建博客案例基本结构并渲染首页"></a>搭建博客案例基本结构并渲染首页</h2><ul>
<li>把MVC结构搭建起来</li>
</ul>
<h2 id="用户注册模块的实现"><a href="#用户注册模块的实现" class="headerlink" title="用户注册模块的实现"></a>用户注册模块的实现</h2><h2 id="用户登录模块的实现"><a href="#用户登录模块的实现" class="headerlink" title="用户登录模块的实现"></a>用户登录模块的实现</h2><h2 id="登录密码MD5加密存储的实现"><a href="#登录密码MD5加密存储的实现" class="headerlink" title="登录密码MD5加密存储的实现"></a>登录密码MD5加密存储的实现</h2><h3 id="为什么要对密码进行加密处理"><a href="#为什么要对密码进行加密处理" class="headerlink" title="为什么要对密码进行加密处理"></a>为什么要对密码进行加密处理</h3><p>在现实生活中，很多人多个账号公用一个密码，那么假如账号信息和个人信息被泄露，那么就存在个人信息和财产受到威胁的情况！</p>
<p>为了防止用户密码被泄露之后，很容易就被非法分子看到原始的密码，我们需要对用户的密码进行加密后再存储！</p>
<p>明文：将原密码实际的存储到数据库中可以直接查看用户的原始密码；</p>
<p>密文：就是将密码，加密之后再保存到数据中，这样存储方式，能有提高密码的安全性，就算数据库中的密码不小心被泄露了，非法分子，也无法直接获取到用户的原密码！</p>
<h3 id="什么是MD5加密"><a href="#什么是MD5加密" class="headerlink" title="什么是MD5加密"></a>什么是MD5加密</h3><p>MD5的全称是Message-Digest Algorithm 5（信息-摘要算法），在90年代初由MIT Laboratory for Computer Science和RSA Data Security Inc的Ronald L. Rivest开发出来，经MD2、MD3和MD4发展而来。</p>
<p>MD5加密的特性：</p>
<ul>
<li><p>MD5加密后输出的是<code>32位长度的字符串</code></p>
</li>
<li><p>相同的内容使用MD5加密后，得到的内容是一致的</p>
</li>
<li><p>MD5加密后的字符串是无法通过算法的形式反向解密的（唯一的破解方式是暴力碰撞破解）</p>
</li>
<li><p>为了防止暴力碰撞破解，我们可以对需要加密的内容，进行<strong>加盐处理</strong></p>
</li>
</ul>
<blockquote>
<p>什么是加盐处理：就是在需要加密的文本内容，和一串长且复杂的文本进行拼接，这样就能防止加密后的MD5值被暴力碰撞破解。</p>
<p>为什么要加盐加密：就是为了防止用户的密码过于简单，然后我们程序通过加盐，提高了密码的复杂性，这样能够保证用户信息的安全！</p>
</blockquote>
<h3 id="在Express中使用MD5加密"><a href="#在Express中使用MD5加密" class="headerlink" title="在Express中使用MD5加密"></a>在Express中使用MD5加密</h3><ol>
<li>运行以下命令安装MD5加密模块：</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">npm install blueimp-md5 -S</div></pre></td></tr></table></figure>
<ol>
<li>使用方式：</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">var hash = md5(&quot;需要被加密的字符串&quot;, &quot;盐&quot;);</div></pre></td></tr></table></figure>
<h2 id="HTTP协议的无状态性"><a href="#HTTP协议的无状态性" class="headerlink" title="HTTP协议的无状态性"></a>HTTP协议的无状态性</h2><ol>
<li><p>HTTP协议的通信模型：基于<code>请求 - 处理 - 响应</code>的！</p>
</li>
<li><p>由于这个通信协议的关系，导致了HTTP每个请求之间都是没有关联的，每当一个请求完成之后，服务器就忘记之前谁曾经请求过！</p>
</li>
<li><p>如果纯粹基于HTTP通信模型，是无法完成登录状态保持的！每次请求服务器，服务器都会把这个请求当作新请求来处理！</p>
</li>
<li><p>我们可以通过 cookie 技术，实现状态保持，但是由于cookie是存储在客户端的一门技术，所以安全性几乎没有，因此不要使用cookie存储敏感的数据！</p>
</li>
</ol>
<h2 id="cookie介绍"><a href="#cookie介绍" class="headerlink" title="cookie介绍"></a>cookie介绍</h2><h3 id="什么是cookie，作用是什么"><a href="#什么是cookie，作用是什么" class="headerlink" title="什么是cookie，作用是什么"></a>什么是cookie，作用是什么</h3><ul>
<li><p>由于<strong>Http协议是无状态</strong>的，且传统服务器<strong>只能被动的响应请求</strong>，所以，当服务器获取到请求的时候，并不知道当前请求属于哪个客户端！</p>
</li>
<li><p>服务器为了能够明确区分每个客户端，需要使用一些小技术，来根据不同的请求区分不同的客户端；</p>
</li>
<li><p>只要有请求发生，那么必然对应一个客户端，那么，我们可以在每次客户端发起请求的时候，向服务器自动发送一个标识符，告诉服务器当前是哪个客户端正在请求服务器的数据；</p>
</li>
<li><p>如何提供这个标识符呢？我们可以在请求头(Request Headers)中添加一个标签，叫做<code>cookie</code>，这样，每次发送请求，都会把这个cookie随同其他报文一起发送给服务器，服务器可以根据报文中的cookie，区分不同的客户端浏览器。</p>
</li>
<li><p>如何在客户端请求头中添加标识符？</p>
<ul>
<li><p>在Node中可以在<code>writeHeader</code>的时候，通过<code>Set-Cookie</code>来将cookie标识通过响应报文发送给客户端！</p>
</li>
<li><p>客户端也可以通过一些方式来操作自己的cookie，比如通过<code>jquery.cookie</code>这个插件！</p>
</li>
</ul>
</li>
</ul>
<h3 id="cookie的基本使用"><a href="#cookie的基本使用" class="headerlink" title="cookie的基本使用"></a>cookie的基本使用</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">var http = require(&apos;http&apos;);</div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line">var server = http.createServer();</div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line">server.on(&apos;request&apos;, function (req, res) &#123;</div><div class="line"></div><div class="line">    // 解析cookie</div><div class="line"></div><div class="line">    var cookies = &#123;&#125;;</div><div class="line"></div><div class="line">    var cookieStr = req.headers.cookie; // 从请求的headers中获取cookie信息</div><div class="line"></div><div class="line">    cookieStr &amp;&amp; cookieStr.split(&apos;;&apos;).forEach(function (item) &#123;</div><div class="line"></div><div class="line">        var parts = item.split(&apos;=&apos;);</div><div class="line"></div><div class="line">        cookies[parts[0].trim()] = parts[1].trim(); // 将cookie解析出来，保存到对象中</div><div class="line"></div><div class="line">    &#125;);</div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line">    res.writeHeader(200, &#123;</div><div class="line"></div><div class="line">        &apos;Content-Type&apos;: &apos;text/plain; charset=utf-8&apos;,</div><div class="line"></div><div class="line">        &quot;Set-Cookie&quot;: [&apos;issend=ok&apos;, &apos;age=20&apos;]</div><div class="line"></div><div class="line">    &#125;);</div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line">    if(cookies.issend ===&apos;ok&apos;)&#123;</div><div class="line"></div><div class="line">        res.end(&apos;不要太贪心哦！&apos;);</div><div class="line"></div><div class="line">    &#125;else&#123;</div><div class="line"></div><div class="line">        res.end(&apos;呐，赏你一朵小红花~~&apos;);</div><div class="line"></div><div class="line">    &#125;</div><div class="line"></div><div class="line">&#125;);</div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line">server.listen(4000, function () &#123;</div><div class="line"></div><div class="line">    console.log(&apos;服务器已启动!&apos;);</div><div class="line"></div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="通过expires设置Cookie的过期时间"><a href="#通过expires设置Cookie的过期时间" class="headerlink" title="通过expires设置Cookie的过期时间"></a>通过<code>expires</code>设置Cookie的过期时间</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">// 设置 过期时间 为60秒之后</div><div class="line"></div><div class="line">// 注意：在设置过期时间的时候，需要将时间转换为 UTC 格式</div><div class="line"></div><div class="line">var expiresTime = new Date(Date.now() + 1000 * 60).toUTCString();</div><div class="line"></div><div class="line">res.writeHeader(200, &#123;</div><div class="line"></div><div class="line">  &apos;Content-Type&apos;: &apos;text/html; charset=utf-8&apos;,</div><div class="line"></div><div class="line">  &apos;Set-Cookie&apos;: [&apos;isvisit=true;expires=&apos; + expiresTime, &apos;test=OK&apos;]</div><div class="line"></div><div class="line">&#125;);</div><div class="line"></div><div class="line">res.end(&apos;&lt;h3&gt;你好，欢迎光临，送给你一个苹果！&lt;/h3&gt;&apos;);</div></pre></td></tr></table></figure>
<p><a href="http://www.wbiao.cn/cartier-watches/knowledge/article-1468.html" target="_blank" rel="external">GMT和UTC有什么区别？格林尼治标准时（GMT）与世界时（UTC）是怎么回事</a></p>
<h3 id="cookie可以被伪造，不安全"><a href="#cookie可以被伪造，不安全" class="headerlink" title="cookie可以被伪造，不安全"></a>cookie可以被伪造，不安全</h3><p>使用谷歌插件<code>edit this cookie</code>，就能伪造cookie数据！所以不要使用cookie存储敏感的数据！比如登录状态和登录信息；</p>
<p>一些敏感的数据，应该存储都服务器端！</p>
<h2 id="登录退出及状态保存"><a href="#登录退出及状态保存" class="headerlink" title="登录退出及状态保存"></a>登录退出及状态保存</h2><h3 id="使用express-session来保存登录状态"><a href="#使用express-session来保存登录状态" class="headerlink" title="使用express-session来保存登录状态"></a>使用<code>express-session</code>来保存登录状态</h3><h4 id="什么是session"><a href="#什么是session" class="headerlink" title="什么是session"></a>什么是session</h4><p>由于HTTP是无状态的，所以服务器在每次连接中持续保存客户端的私有数据，此时需要结合cookie技术，通过session会话机制，在服务器端保存每个HTTP请求的私有数据；</p>
<h4 id="session原理"><a href="#session原理" class="headerlink" title="session原理"></a>session原理</h4><p>在服务器内存中开辟一块地址空间，专门存放每个客户端私有的数据，每个客户端根据cookie中保存的私有sessionId，可以获取到独属于自己的session数据。</p>
<h4 id="在express中使用session"><a href="#在express中使用session" class="headerlink" title="在express中使用session"></a>在express中使用session</h4><ol>
<li>安装session模块</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">npm install express-session -S</div></pre></td></tr></table></figure>
<ol>
<li>导入session模块</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">var session = require(&apos;express-session&apos;)</div></pre></td></tr></table></figure>
<ol>
<li>在express中使用<code>session</code>中间件：</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">// 启用 session 中间件</div><div class="line"></div><div class="line">app.use(session(&#123;</div><div class="line"></div><div class="line">  secret: &apos;keyboard cat&apos;, // 相当于是一个加密密钥，值可以是任意字符串</div><div class="line"></div><div class="line">  resave: false, // 强制session保存到session store中</div><div class="line"></div><div class="line">  saveUninitialized: false // 强制没有“初始化”的session保存到storage中</div><div class="line"></div><div class="line">&#125;))</div></pre></td></tr></table></figure>
<ol>
<li>将私有数据保存到当前请求的session会话中：</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">// 将登录的用户保存到session中</div><div class="line"></div><div class="line">req.session.user = result.dataValues;</div><div class="line"></div><div class="line">// 设置是否登录为true</div><div class="line"></div><div class="line">req.session.islogin = true;</div></pre></td></tr></table></figure>
<ol>
<li>通过<code>destroy()</code>方法清空<code>session</code>数据：</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">req.session.destroy(function(err)&#123;</div><div class="line"></div><div class="line">  if(err) throw err;</div><div class="line"></div><div class="line">  console.log(&apos;用户退出成功！&apos;);</div><div class="line"></div><div class="line">  res.redirect(&apos;/&apos;);</div><div class="line"></div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h2 id="注销功能的实现"><a href="#注销功能的实现" class="headerlink" title="注销功能的实现"></a>注销功能的实现</h2><h2 id="使用模板引擎处理公共部分"><a href="#使用模板引擎处理公共部分" class="headerlink" title="使用模板引擎处理公共部分"></a>使用模板引擎处理公共部分</h2><h2 id="添加文章并跳转到文章详情"><a href="#添加文章并跳转到文章详情" class="headerlink" title="添加文章并跳转到文章详情"></a>添加文章并跳转到文章详情</h2><h2 id="完成文章编辑功能"><a href="#完成文章编辑功能" class="headerlink" title="完成文章编辑功能"></a>完成文章编辑功能</h2><h2 id="首页文章列表渲染和处理相对时间"><a href="#首页文章列表渲染和处理相对时间" class="headerlink" title="首页文章列表渲染和处理相对时间"></a>首页文章列表渲染和处理相对时间</h2><h2 id="使用Sql语句进行联表查询"><a href="#使用Sql语句进行联表查询" class="headerlink" title="使用Sql语句进行联表查询"></a>使用Sql语句进行联表查询</h2><h2 id="首页文章列表分页功能的实现"><a href="#首页文章列表分页功能的实现" class="headerlink" title="首页文章列表分页功能的实现"></a>首页文章列表分页功能的实现</h2><h2 id="相关文章"><a href="#相关文章" class="headerlink" title="相关文章"></a>相关文章</h2><ol>
<li><p><a href="http://blog.csdn.net/liangklfang/article/details/50998959" target="_blank" rel="external">node.js中express-session配置项详解</a></p>
</li>
<li><p><a href="http://www.cmd5.com/" target="_blank" rel="external">MD5在线生成器1</a></p>
</li>
<li><p><a href="http://pmd5.com/" target="_blank" rel="external">MD5在线生成器2</a></p>
</li>
<li><p><a href="https://github.com/blueimp/JavaScript-MD5" target="_blank" rel="external">JavaScript-MD5</a></p>
</li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2017/10/25/nodelast/" data-id="cj96z1n5o0003yk523i5uipiu" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-text" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2017/10/22/text/" class="article-date">
  <time datetime="2017-10-22T05:07:02.119Z" itemprop="datePublished">2017-10-22</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>[TOC]</p>
<h2 id="angularjs"><a href="#angularjs" class="headerlink" title="angularjs"></a>angularjs</h2><h3 id="1-控制器中的-scope为什么不能改成其他的名字"><a href="#1-控制器中的-scope为什么不能改成其他的名字" class="headerlink" title="1.控制器中的$scope为什么不能改成其他的名字"></a>1.控制器中的$scope为什么不能改成其他的名字</h3><h3 id="2-安全的方式创建控制器"><a href="#2-安全的方式创建控制器" class="headerlink" title="2.安全的方式创建控制器"></a>2.安全的方式创建控制器</h3><h3 id="3-angularjs中的作用域"><a href="#3-angularjs中的作用域" class="headerlink" title="3.angularjs中的作用域"></a>3.angularjs中的作用域</h3><ul>
<li>局部作用域<ul>
<li>angularjs中控制器控制的区域就是一块局部作用域</li>
<li>$scope代表的就是局部作用域</li>
<li>作用域嵌套的情况下 数据是一层一层通过$scope向外部查找的 直到全局作用域</li>
<li>相邻控制器之间是独立的 互不影响的</li>
</ul>
</li>
<li>全局作用域<ul>
<li>$rootScope代表的就是全局作用域</li>
<li>挂载到全局作用域中的数据 每个控制器中都可以拿到</li>
</ul>
</li>
</ul>
<h3 id="4-angularjs常用指令"><a href="#4-angularjs常用指令" class="headerlink" title="4.angularjs常用指令"></a>4.angularjs常用指令</h3><ul>
<li>指令分类:内置指令(普通指令、事件指令) 自定义指令</li>
<li><p>普通指令</p>
<ul>
<li><p>ng-repeat 遍历数据</p>
  <figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">ng-app</span>=<span class="string">"myApp"</span> <span class="attr">ng-controller</span>=<span class="string">"demoCtrl"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">h4</span>&gt;</span>遍历 一维数组<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">        <span class="comment">&lt;!--</span></div><div class="line"><span class="comment">            ng-repeat 遍历数据 类似于for in 循环</span></div><div class="line"><span class="comment">            in 是固定写法</span></div><div class="line"><span class="comment">            in 后面加上要遍历的数据</span></div><div class="line"><span class="comment">            item 是遍历的当前项(item这个词可以随意写)</span></div><div class="line"><span class="comment">            这个指令可以加在任何标签上</span></div><div class="line"><span class="comment">        --&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">ng-repeat</span>=<span class="string">"item in data"</span>&gt;</span></div><div class="line">            &#123;&#123;item&#125;&#125;</div><div class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">hr</span> /&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">h4</span>&gt;</span>遍历 数组中混合对象<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">ng-repeat</span>=<span class="string">"item in person"</span>&gt;</span>&#123;&#123;item.name&#125;&#125; &#123;&#123;item.age&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">hr</span> /&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">h4</span>&gt;</span>遍历 对象<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!--</span></div><div class="line"><span class="comment">        key代表对象的键值</span></div><div class="line"><span class="comment">        val代表对象键值对应的值</span></div><div class="line"><span class="comment">    --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-repeat</span>=<span class="string">"(key,val) in obj"</span>&gt;</span></div><div class="line">        &#123;&#123;key&#125;&#125; &#123;&#123;val&#125;&#125;</div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"node_modules/angular/angular.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">        angular.module(<span class="string">'myApp'</span>,[])</span></div><div class="line"><span class="javascript">            .controller(<span class="string">'demoCtrl'</span>,[<span class="string">'$scope'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">$scope</span>)</span>&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                <span class="comment">// 一维数组</span></span></div><div class="line"><span class="javascript">                $scope.data = [<span class="string">'小明'</span>,<span class="string">'小红'</span>,<span class="string">'小黑'</span>,<span class="string">'小琴'</span>];</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                <span class="comment">// 数组中混合对象(最常用的形式)</span></span></div><div class="line"><span class="undefined">                $scope.person = [</span></div><div class="line"><span class="javascript">                    &#123;<span class="attr">name</span>:<span class="string">'小明'</span>,<span class="attr">age</span>:<span class="number">18</span>&#125;,</span></div><div class="line"><span class="javascript">                    &#123;<span class="attr">name</span>:<span class="string">'小红'</span>,<span class="attr">age</span>:<span class="number">28</span>&#125;,</span></div><div class="line"><span class="javascript">                    &#123;<span class="attr">name</span>:<span class="string">'小红'</span>,<span class="attr">age</span>:<span class="number">28</span>&#125;,</span></div><div class="line"><span class="javascript">                    &#123;<span class="attr">name</span>:<span class="string">'小黑'</span>,<span class="attr">age</span>:<span class="number">38</span>&#125;,</span></div><div class="line"><span class="javascript">                    &#123;<span class="attr">name</span>:<span class="string">'小琴'</span>,<span class="attr">age</span>:<span class="number">48</span>&#125;</span></div><div class="line"><span class="undefined">                ]</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                <span class="comment">// 对象</span></span></div><div class="line"><span class="undefined">                $scope.obj = &#123;</span></div><div class="line"><span class="javascript">                    name:<span class="string">'小明'</span>,</span></div><div class="line"><span class="undefined">                    age:35,</span></div><div class="line"><span class="javascript">                    hobby : <span class="string">'吃饭'</span></span></div><div class="line"><span class="undefined">                &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">            &#125;])</span></div><div class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
<li><p>ng-repeat 补充</p>
  <figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">ng-app</span>=<span class="string">"myApp"</span> <span class="attr">ng-controller</span>=<span class="string">"demoCtrl"</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="comment">&lt;!--</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        在遍历的过程中</span></div><div class="line"><span class="comment">            $index : 遍历过程中的索引</span></div><div class="line"><span class="comment">            $first : 布尔类型的值 当前是否是第一项 是返回true 不是返回false</span></div><div class="line"><span class="comment">            $last  : 布尔类型的值 当前是否是最后一项 是返回true 不是返回false</span></div><div class="line"><span class="comment">            $middle : 布尔类型的值 第一项和最后一项返回false 其余返回true</span></div><div class="line"><span class="comment">            $even : 偶数项返回true 否则返回false</span></div><div class="line"><span class="comment">            $odd : 奇数项返回true 否则返回false</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        我们可以利用这些值在循环的过程中做各种判断 达到我们想要的目的</span></div><div class="line"><span class="comment">    --&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">ng-repeat</span>=<span class="string">"item in person"</span> <span class="attr">class</span>=<span class="string">"&#123;&#123;$first ? 'first' : ''&#125;&#125; &#123;&#123; $last ? 'last' : ''&#125;&#125;"</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>名字：&#123;&#123;item.name&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>年龄：&#123;&#123;item.age&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>索引：&#123;&#123;$index&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>是否是第一项：&#123;&#123;$first&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>是否是最后一项：&#123;&#123;$last&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>是否是中间项：&#123;&#123;$middle&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>是否偶数项：&#123;&#123;$even&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>是否奇数项：&#123;&#123;$odd&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="comment">&lt;!--</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        默认情况下遍历的数组中不能有重复类型的值(基本数据类型) 否则会报错 信息如下</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        [ngRepeat:dupes]  ng-repeat指令被愚弄(调戏)了</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        解决: 在遍历的数据后面写上track by 一个唯一(不重复)的值  一般会写$index</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">    --&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">hr</span> /&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-repeat</span>=<span class="string">"item in data track by $index"</span>&gt;</span></div><div class="line">        &#123;&#123;item&#125;&#125;</div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">hr</span> /&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-repeat</span>=<span class="string">"(key,val) in data track by key"</span>&gt;</span></div><div class="line">        &#123;&#123;val&#125;&#125;</div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">hr</span> /&gt;</span></div><div class="line"></div><div class="line">    <span class="comment">&lt;!-- 通过奇偶数做隔行变色 --&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="undefined">        .even&#123;background:pink;&#125;</span></div><div class="line"><span class="undefined">        .odd&#123;background:lightblue;&#125;</span></div><div class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">ng-repeat</span>=<span class="string">"item in person"</span> <span class="attr">class</span>=<span class="string">"&#123;&#123;$even ? 'even' : 'odd'&#125;&#125;"</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>名字：&#123;&#123;item.name&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>年龄：&#123;&#123;item.age&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>索引：&#123;&#123;$index&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>是否是第一项：&#123;&#123;$first&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>是否是最后一项：&#123;&#123;$last&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>是否是中间项：&#123;&#123;$middle&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>是否偶数项：&#123;&#123;$even&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>是否奇数项：&#123;&#123;$odd&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"node_modules/angular/angular.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">        angular.module(<span class="string">'myApp'</span>,[])</span></div><div class="line"><span class="javascript">            .controller(<span class="string">'demoCtrl'</span>,[<span class="string">'$scope'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">$scope</span>)</span>&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">                $scope.person = [</span></div><div class="line"><span class="javascript">                    &#123;<span class="attr">name</span>:<span class="string">'小明'</span>,<span class="attr">age</span>:<span class="number">18</span>&#125;,</span></div><div class="line"><span class="javascript">                    &#123;<span class="attr">name</span>:<span class="string">'小红'</span>,<span class="attr">age</span>:<span class="number">28</span>&#125;,</span></div><div class="line"><span class="javascript">                    &#123;<span class="attr">name</span>:<span class="string">'小红'</span>,<span class="attr">age</span>:<span class="number">28</span>&#125;,</span></div><div class="line"><span class="javascript">                    &#123;<span class="attr">name</span>:<span class="string">'小黑'</span>,<span class="attr">age</span>:<span class="number">38</span>&#125;,</span></div><div class="line"><span class="javascript">                    &#123;<span class="attr">name</span>:<span class="string">'小琴'</span>,<span class="attr">age</span>:<span class="number">48</span>&#125;</span></div><div class="line"><span class="undefined">                ]</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                <span class="comment">// 数组中存在重复的值</span></span></div><div class="line"><span class="javascript">                $scope.data = [<span class="string">'小明'</span>,<span class="string">'小红'</span>,<span class="string">'小明'</span>,<span class="string">'小红'</span>];</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">            &#125;])</span></div><div class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
<li><p>在循环的过程中如果有重复项 需要加上 track by $index</p>
</li>
<li><p>ng-class指令 用来操作类名</p>
  <figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">ng-app</span>=<span class="string">"myApp"</span> <span class="attr">ng-controller</span>=<span class="string">"demoCtrl"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="undefined">        button &#123;</span></div><div class="line"><span class="undefined">            width: 120px;</span></div><div class="line"><span class="undefined">            height: 40px;</span></div><div class="line"><span class="undefined">            border: none;</span></div><div class="line"><span class="undefined">            outline: none;</span></div><div class="line"><span class="undefined">            color: #FFF;</span></div><div class="line"><span class="undefined">            font-size: 16px;</span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">        .red &#123;</span></div><div class="line"><span class="undefined">            background: red;</span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">        .green &#123;</span></div><div class="line"><span class="undefined">            background: green;</span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!--</span></div><div class="line"><span class="comment">        ng-class指令：专门用来操作类名的</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">            1.指令的值以对象的形式存在</span></div><div class="line"><span class="comment">            2.对象的属性值转化为布尔值是true时,将当前的属性名作为类名添加到class属性中</span></div><div class="line"><span class="comment">            3.对象的属性值转化为布尔值是false时,将当前的属性名从class属性中删除掉</span></div><div class="line"><span class="comment">            4.属性值可以是数据模型,也可以是JS表达式</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        注意：angular不推崇DOM操作,在当前例子中并没有直接操作类名的JS语句,</span></div><div class="line"><span class="comment">        而是通过数据模型isGreen的值是true还是false来确定添加哪个颜色的类名,</span></div><div class="line"><span class="comment">        至于如何添加到class属性中,由angular替我们完成。</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">    --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">ng-class</span>=<span class="string">"&#123;'green':isGreen,'red':!isGreen&#125;"</span> <span class="attr">ng-click</span>=<span class="string">"setColor()"</span>&gt;</span>按钮<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"node_modules/angular/angular.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">        angular.module(<span class="string">'myApp'</span>, [])</span></div><div class="line"><span class="javascript">            .controller(<span class="string">'demoCtrl'</span>, [<span class="string">'$scope'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">$scope</span>) </span>&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                <span class="comment">// isGreen用来控制当前按钮是绿色还是非绿色</span></span></div><div class="line"><span class="javascript">                $scope.isGreen = <span class="literal">true</span>;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                <span class="comment">// 用来切换按钮的颜色</span></span></div><div class="line"><span class="javascript">                $scope.setColor = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                    <span class="comment">// 让isGreen在每次点击按钮的时候跟当前值取反</span></span></div><div class="line"><span class="javascript">                    <span class="comment">// 也就是一次是true 一次是false </span></span></div><div class="line"><span class="javascript">                    <span class="comment">// 以达到切换颜色的目的</span></span></div><div class="line"><span class="undefined">                    $scope.isGreen = !$scope.isGreen;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">                &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">            &#125;])</span></div><div class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
<li><p>ng-bind ng-bind-template 数据绑定 解决表达式闪烁问题</p>
  <figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">ng-app</span>=<span class="string">"myApp"</span> <span class="attr">ng-controller</span>=<span class="string">"demoCtrl"</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!--</span></div><div class="line"><span class="comment">        在angular没有被加载进页面之前,浏览器会将下面的</span></div><div class="line"><span class="comment">        表达式当作普通字符串显示在页面中,angular在被加</span></div><div class="line"><span class="comment">        载进页面之后,才会将下面的表达式替换成了对应的数</span></div><div class="line"><span class="comment">        据,这样就会存在闪烁问题</span></div><div class="line"><span class="comment">    --&gt;</span></div><div class="line">    &#123;&#123;msg1&#125;&#125;</div><div class="line"></div><div class="line">    <span class="comment">&lt;!--</span></div><div class="line"><span class="comment">        用指令ng-bind绑定数据解决这个问题</span></div><div class="line"><span class="comment">        ng-bind指定是专门用来做数据绑定的</span></div><div class="line"><span class="comment">    --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-bind</span>=<span class="string">"msg1"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"node_modules/angular/angular.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">        angular.module(<span class="string">'myApp'</span>,[])</span></div><div class="line"><span class="javascript">            .controller(<span class="string">'demoCtrl'</span>,[<span class="string">'$scope'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">$scope</span>)</span>&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                $scope.msg1 = <span class="string">'指令ng-bind解决表达式闪烁问题'</span>;</span></div><div class="line"><span class="javascript">                $scope.msg2 = <span class="string">'指令ng-cloak解决表达式闪烁问题'</span>;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">            &#125;])</span></div><div class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
<li><p>ng-non-bindable 不解析</p>
</li>
<li><p>ng-show、ng-hide 通过样式的方式控制元素显示隐藏</p>
  <figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">ng-app</span>=<span class="string">"myApp"</span> <span class="attr">ng-controller</span>=<span class="string">"demoCtrl"</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="comment">&lt;!--</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        ng-show ：控制元素显示隐藏(通样式的方式)</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">            当值为true时 元素显示</span></div><div class="line"><span class="comment">            当值为false时 元素隐藏</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        ng-hide ：控制元素显示隐藏(通样式的方式)</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">            当值为true时 元素隐藏</span></div><div class="line"><span class="comment">            当值为false时 元素显示</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">    --&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>例子1 当没有数据的时候显示 '暂无数据'<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">ng-repeat</span>=<span class="string">"data in list"</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123;data.id&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>&#123;&#123;data.title&#125;&#125;<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">div</span>&gt;</span></div><div class="line">                &#123;&#123;data.description&#125;&#125;</div><div class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="comment">&lt;!--</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        当没有数据的时候显示 "暂无数据"</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        可以通过ng-show指令 如果存放数据的数组长度为0</span></div><div class="line"><span class="comment">        也就是没有数据 表达式返回true 当前div显示</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        如果存放数据的数组不为0 表达式返回false 当前div隐藏</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        也可以用ng-hide="list.length" 达到相同效果(自行思考)</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">    --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-show</span>=<span class="string">"list.length == 0"</span>&gt;</span>暂无数据<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"javascript:;"</span> <span class="attr">ng-click</span>=<span class="string">"resetData()"</span>&gt;</span>清空数据<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">hr</span> /&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">h3</span> <span class="attr">ng-init</span>=<span class="string">"isToggle=true"</span>&gt;</span>例子2 选项卡切换<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">ng-click</span>=<span class="string">"isToggle=true"</span>&gt;</span>显示1<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">ng-click</span>=<span class="string">"isToggle=false"</span>&gt;</span>显示2<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-show</span>=<span class="string">"isToggle"</span>&gt;</span>1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-show</span>=<span class="string">"!isToggle"</span>&gt;</span>2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"node_modules/angular/angular.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">        angular.module(<span class="string">'myApp'</span>,[])</span></div><div class="line"><span class="javascript">            .controller(<span class="string">'demoCtrl'</span>,[<span class="string">'$scope'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">$scope</span>)</span>&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">                $scope.list = [</span></div><div class="line"><span class="undefined">                    &#123;</span></div><div class="line"><span class="javascript">                        id:<span class="string">'1'</span>,</span></div><div class="line"><span class="javascript">                        title:<span class="string">'有人在微信QQ上拉你搞投资？那都是骗子！'</span>,</span></div><div class="line"><span class="javascript">                        description : <span class="string">'喜欢炒股的朋友或许经常在微信或者QQ收到各种“业务员”的推广，有的介绍老师给你，有的介绍私募给你，有的是亲自操刀上阵，通常情况下是在操作获利之后五五分成，在操作一段时间之后，“业务员”会告诉你最近股市不好做，不好赚钱，而“我们有新的业务”，可以快速地获得利润，再给你发一些高收益的截图。'</span></span></div><div class="line"><span class="undefined">                    &#125;,</span></div><div class="line"><span class="undefined">                    &#123;</span></div><div class="line"><span class="javascript">                        id:<span class="string">'2'</span>,</span></div><div class="line"><span class="javascript">                        title:<span class="string">'女子被"男友"骗150万 相处3年不知对方系闺蜜假扮'</span>,</span></div><div class="line"><span class="javascript">                        description : <span class="string">'时报讯 今年2月，杭州市滨江警方接到一起报警，报警人林芬（化名）称2014年至2017年间，自己被男友高鹏（化名）骗了共计150多万元。近日，民警抓获了该案嫌疑人，一看，这高鹏啊，不仅是个女的，还是林芬的闺蜜。'</span></span></div><div class="line"><span class="undefined">                    &#125;</span></div><div class="line"><span class="undefined">                ]</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                <span class="comment">// 删除数据方法</span></span></div><div class="line"><span class="javascript">                $scope.resetData = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                    <span class="comment">// 快速清空数组</span></span></div><div class="line"><span class="undefined">                    $scope.list.length = 0;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                    <span class="comment">// 也可以将数组重新复制为空数组</span></span></div><div class="line"><span class="javascript">                    <span class="comment">// $scope.list = [];</span></span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">                &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">            &#125;])</span></div><div class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
<li><p>ng-if 控制元素显示隐藏</p>
<ul>
<li>和ng-show用法相同</li>
<li>区别是ng-if是通过DOM节点的添加和删除使得元素显示和隐藏</li>
</ul>
</li>
<li><p>ng-switch、ng-switch-when</p>
  <figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line"><span class="comment">&lt;!--</span></div><div class="line"><span class="comment">    ng-switch ng-switch-when 是一对指令类</span></div><div class="line"><span class="comment">    似于JS中 switch case 语句</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">    匹配到哪项 哪项就显示 其他项就隐藏</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">    常用于 做多个选项卡的显示和隐藏</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">--&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">ng-app</span> <span class="attr">ng-init</span>=<span class="string">"showNum=1"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-switch</span>=<span class="string">"showNum"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">button</span> <span class="attr">ng-click</span>=<span class="string">"showNum=1"</span>&gt;</span>显示1<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">button</span> <span class="attr">ng-click</span>=<span class="string">"showNum=2"</span>&gt;</span>显示2<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">button</span> <span class="attr">ng-click</span>=<span class="string">"showNum=3"</span>&gt;</span>显示3<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-switch-when</span>=<span class="string">"1"</span>&gt;</span>1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-switch-when</span>=<span class="string">"2"</span>&gt;</span>2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-switch-when</span>=<span class="string">"3"</span>&gt;</span>3<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"node_modules/angular/angular.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>事件指令</p>
<ul>
<li>ng-click</li>
<li>ng-dblclick</li>
<li>ng-blur</li>
<li>ng-focus</li>
<li>ng-change</li>
<li>…</li>
</ul>
</li>
<li>其他指令<ul>
<li>ng-src=””</li>
<li>ng-href=””</li>
</ul>
</li>
<li>注意<ul>
<li>大部分指令接收的值是不需要加插值表达式的</li>
<li>少部分指令在使用的时候需要加上插值表达式</li>
<li>遇到不需要加的着重记忆即可</li>
</ul>
</li>
</ul>
<h3 id="5-练习：在点击提交按钮后将选中项找出来"><a href="#5-练习：在点击提交按钮后将选中项找出来" class="headerlink" title="5.练习：在点击提交按钮后将选中项找出来"></a>5.练习：在点击提交按钮后将选中项找出来</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">ng-app</span>=<span class="string">"myApp"</span> <span class="attr">ng-controller</span>=<span class="string">"demoCtrl"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>在点击提交按钮后将选中项找出来<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">ng-repeat</span>=<span class="string">"data in balls"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">value</span>=<span class="string">"&#123;&#123;data.name&#125;&#125;"</span> <span class="attr">ng-model</span>=<span class="string">"data.isChecked"</span>/&gt;</span>&#123;&#123;data.name&#125;&#125;</div><div class="line">    <span class="tag">&lt;/<span class="name">label</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">ng-click</span>=<span class="string">"submitData()"</span>&gt;</span>提交<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></div><div class="line">    选中的结果：</div><div class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">ng-repeat</span>=<span class="string">"data in result"</span>&gt;</span>&#123;&#123;data.name&#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"node_modules/angular/angular.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">        angular.module(<span class="string">'myApp'</span>,[])</span></div><div class="line"><span class="javascript">            .controller(<span class="string">'demoCtrl'</span>,[<span class="string">'$scope'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">$scope</span>)</span>&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">                $scope.balls = [</span></div><div class="line"><span class="undefined">                    &#123;</span></div><div class="line"><span class="javascript">                        name:<span class="string">'足球'</span>,</span></div><div class="line"><span class="javascript">                        isChecked : <span class="literal">false</span></span></div><div class="line"><span class="undefined">                    &#125;,</span></div><div class="line"><span class="undefined">                    &#123;</span></div><div class="line"><span class="javascript">                        name:<span class="string">'篮球'</span>,</span></div><div class="line"><span class="javascript">                        isChecked : <span class="literal">false</span></span></div><div class="line"><span class="undefined">                    &#125;,</span></div><div class="line"><span class="undefined">                    &#123;</span></div><div class="line"><span class="javascript">                        name:<span class="string">'橄榄球'</span>,</span></div><div class="line"><span class="javascript">                        isChecked : <span class="literal">false</span></span></div><div class="line"><span class="undefined">                    &#125;,</span></div><div class="line"><span class="undefined">                    &#123;</span></div><div class="line"><span class="javascript">                        name:<span class="string">'排球'</span>,</span></div><div class="line"><span class="javascript">                        isChecked : <span class="literal">false</span></span></div><div class="line"><span class="undefined">                    &#125;,</span></div><div class="line"><span class="undefined">                    &#123;</span></div><div class="line"><span class="javascript">                        name:<span class="string">'乒乓球'</span>,</span></div><div class="line"><span class="javascript">                        isChecked : <span class="literal">false</span></span></div><div class="line"><span class="undefined">                    &#125;</span></div><div class="line"><span class="undefined">                ];</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">                $scope.result = [];</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                $scope.submitData = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">                    $scope.result = [];</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                    <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;$scope.balls.length;i++)&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                        <span class="keyword">if</span>($scope.balls[i].isChecked)&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">                            $scope.result.push($scope.balls[i])</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">                        &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">                    &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">                &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">            &#125;])</span></div><div class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="6-angularjs中请求数据的方式"><a href="#6-angularjs中请求数据的方式" class="headerlink" title="6.angularjs中请求数据的方式"></a>6.angularjs中请求数据的方式</h3><ul>
<li>angularjs中提供了一些方法,我们可以用这些方法向后台发送请求,获取数据</li>
<li>语法：<ul>
<li>标准的请求方式(通过例子说明)<ul>
<li>$http()</li>
</ul>
</li>
<li>简化的请求方式(通过例子说明)<ul>
<li>$http.get()</li>
<li>$http.post()</li>
</ul>
</li>
</ul>
</li>
<li><a href="https://cdn.bootcss.com/angular.js/1.6.4/angular-sanitize.min.js" target="_blank" rel="external">ng-bind-html</a></li>
</ul>
<h3 id="7-Angular’s-jqLite"><a href="#7-Angular’s-jqLite" class="headerlink" title="7.Angular’s jqLite"></a>7.<a href="https://code.angularjs.org/1.6.4/docs/api/ng/function/angular.element" target="_blank" rel="external">Angular’s jqLite</a></h3><ul>
<li>需求：angularjs虽然不推崇DOM操作 但是谁也保证不了 一点DOM操作都没有</li>
<li>方案：angularjs提供了一个简化版本的jq,叫做jqLite.看文档说下面的事情<ul>
<li>提供了一些和jquery名字一样的方法</li>
<li>但都是些简化的方法 不拥有完全的功能</li>
<li>用法上大多一样 不一样的地方官方文档上会有说明</li>
</ul>
</li>
<li>语法：<ul>
<li>通过例子说明如何通过angular.element()将元素转换为jqLite对象</li>
<li>讲解如何通过jqLite对象使用官方提供的方法</li>
</ul>
</li>
</ul>
<h3 id="8-面向对象的方式创建控制器"><a href="#8-面向对象的方式创建控制器" class="headerlink" title="8.面向对象的方式创建控制器"></a>8.面向对象的方式创建控制器</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">ng-app</span>=<span class="string">"myApp"</span> <span class="attr">ng-controller</span>=<span class="string">"demoCtrl as hello"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;hello.name&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;age&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"node_modules/angular/angular.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">        angular.module(<span class="string">'myApp'</span>, [])</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">        /*</span></div><div class="line"><span class="javascript">            <span class="number">1.</span>angular内部会帮我们<span class="keyword">new</span>控制器处理函数</span></div><div class="line"><span class="javascript">            <span class="number">2.</span>demoCtrl <span class="keyword">as</span> hello 这个hello就是<span class="keyword">new</span>出来的对象</span></div><div class="line"><span class="undefined">            3.在视图中我们就可以使用hello.属性的方式取到hello对象中的值</span></div><div class="line"><span class="undefined">            4.面向对象的方式和$scope可以同时使用</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">         */</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">            .controller(<span class="string">'demoCtrl'</span>, [<span class="string">'$scope'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">$scope</span>) </span>&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                <span class="keyword">this</span>.name = <span class="string">'我是孙悟空'</span>;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                $scope.age = <span class="string">'我今年500岁'</span>;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">            &#125;])</span></div><div class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="9-知识点补充"><a href="#9-知识点补充" class="headerlink" title="9.知识点补充"></a>9.知识点补充</h3><ul>
<li>$scope.$watch</li>
<li>$scope.$apply</li>
</ul>
<h3 id="10-AngularJS-Batarang-Chrome开发调试工具"><a href="#10-AngularJS-Batarang-Chrome开发调试工具" class="headerlink" title="10.AngularJS Batarang Chrome开发调试工具"></a>10.<a href="https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk" target="_blank" rel="external">AngularJS Batarang Chrome开发调试工具</a></h3><ul>
<li>调试工具的使用<ul>
<li>必须要以服务器的方式打开页面</li>
<li>将Enable选项勾选</li>
</ul>
</li>
<li>能够实时观察到数据的</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2017/10/22/text/" data-id="cj96z1n5p0004yk52jdwyd7zv" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-hello-world" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2017/08/26/hello-world/" class="article-date">
  <time datetime="2017-08-26T07:11:52.199Z" itemprop="datePublished">2017-08-26</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2017/08/26/hello-world/">你好世界</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>Welcome to <a href="https://hexo.io/" target="_blank" rel="external">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="external">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="external">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="external">GitHub</a>.</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo new <span class="string">"My New Post"</span></div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="external">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo server</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="external">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo generate</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="external">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo deploy</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="external">Deployment</a></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2017/08/26/hello-world/" data-id="cj9709jfe00004g52s25sxqzx" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/10/">October 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/08/">August 2017</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2017/10/25/node2/">nodejs1</a>
          </li>
        
          <li>
            <a href="/2017/10/25/node-express/">express</a>
          </li>
        
          <li>
            <a href="/2017/10/25/node/">nodejs</a>
          </li>
        
          <li>
            <a href="/2017/10/25/nodelast/">angular2</a>
          </li>
        
          <li>
            <a href="/2017/10/22/text/">(no title)</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2017 John Doe<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>

  </div>
</body>
</html>